window.addEventListener("load", function () {
	//功能一:海量API区移入移出交互
	//思路:
	//1.获取相关节点
	console.log($("#api li"));
	//2.给li绑定移入移出事件
	let oldUrl = "";
	$("#api li").forEach(function (v) {
		// console.log(v);
		//2-1.移入事件
		v.addEventListener("mouseover", function () {
			//2-1-1.背景色变蓝
			this.style.backgroundColor = "#2f7ee9";
			//2-1-2.字体颜色变白
			this.style.color = "#fff";
			//2-1-3.图片切换为透明的图片
			console.log(this.firstElementChild);
			let imgUrl = this.firstElementChild.src;
			this.firstElementChild.src = imgUrl.replace(".svg", "-c.svg");
			oldUrl = imgUrl;
		});

		//3-1.移出事件
		v.addEventListener("mouseout", function () {
			//3-1-1.背景颜色变白
			this.style.backgroundColor = "#fff";
			//3-1-2.字体变黑
			this.style.color = "#000";
			//3-1-3.图片切换为原来的图片
			this.firstElementChild.src = oldUrl;
		});
	});

	//功能:给独角兽区设置自动播放,间隔3秒切换
	//思路:
	//1.获取三个银行的图文div节点列表--伪数组

	const unicornLists = $(".unicorn-cont");
	console.log(unicornLists);
	unicornLists[0].style.opacity = "1";
	let index = 1;
	//2.设置周期定时器,每隔3秒切换

	this.window.setInterval(function () {
		//3.循环遍历伪数组,利用排他思想,将三张图文都设置为透明度0
		unicornLists.forEach(function (v) {
			console.log(v);
			v.style.opacity = "0";
		});
		//4.然后利用索引轮流给每一个图文设置显示
		unicornLists[index].style.opacity = "1";
		//5.每一次循环索引值要++
		index++;
		//6.当索引达到最大值2时要回到第一张,再进行循环显示
		if (index > unicornLists.length - 1) {
			index = 0;
		}
	}, 3000);
	// 回到顶部
	spirit.onclick = function () {
		window.scrollTo({ left: 0, top: 0, behavior: "smooth" });
	};

	var mySwiper = new Swiper(".swiper", {
		autoplay: true, //可选选项，自动滑动
		pagination: {
			el: ".swiper-pagination",
			clickable: true,
		},
	});

	//如果.你初始化时没有定义Swiper实例，后面也可以通过Swiper的HTML元素来获取该实例
	new Swiper(".swiper");
	var mySwiper = document.querySelector(".swiper").swiper;
	mySwiper.slideNext();
});
